<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优化自适应标签页</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            padding: 20px;
        }
        
        .tab-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }
        
        .tabs-header {
            position: relative;
            background-color: #f8f9fa;
            /* border-bottom: 1px solid #ddd; */
        }
        
        .tabs-wrapper {
            overflow: hidden;
            position: relative;
            padding: 0 40px;
        }
        
        .tabs {
            display: flex;
            transition: transform 0.3s ease;
            height: 42px;
        }
        
        .tab {
            position: relative;
            padding: 10px 20px;
            cursor: pointer;
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            /* border-bottom: none; */
            border-radius: 5px;
            margin-right: 5px;
            transition: all 0.2s ease;
            user-select: none;
            white-space: nowrap;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .tab-text {
            transition: all 0.2s ease;
            transform: translateX(0);
        }
        
        .tab:hover {
            background-color: #e9ecef;
        }
        
        .tab.active {
            background-color: white;
            /* border-bottom: 1px solid white; */
            /* margin-bottom: -1px; */
            color: #1890ff;
            font-weight: bold;
        }
        
        .close-tab {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.2s;
            font-size: 12px;
            pointer-events: none;
        }
        
        .tab:hover .close-tab {
            opacity: 1;
            pointer-events: auto;
        }
        
        .tab:hover .tab-text {
            transform: translateX(-8px);
        }
        
        .close-tab:hover {
            background-color: #e9ecef;
            color: #ff4d4f;
        }
        
        .tab-content {
            padding: 20px;
            min-height: 200px;
        }
        
        .content {
            display: none;
            opacity: 0;
            transform: translateY(10px);
        }
        
        .content.active {
            display: block;
        }
        
        /* 导航按钮 */
        .nav-button {
            position: absolute;
            top: 0;
            width: 40px;
            height: 100%;
            display: none; /* 默认完全隐藏 */
            align-items: center;
            justify-content: center;
            background-color: rgba(248, 249, 250, 0.8);
            cursor: pointer;
            z-index: 10;
            color: #666;
            font-size: 18px;
            user-select: none;
        }
        
        .nav-button.visible {
            display: flex; /* 需要时显示 */
        }
        
        .nav-button:hover {
            background-color: rgba(233, 236, 239, 0.8);
            color: #1890ff;
        }
        
        .nav-button.prev {
            left: 0;
        }
        
        .nav-button.next {
            right: 0;
        }
        
        .nav-button.disabled {
            opacity: 0.3;
            cursor: not-allowed;
            color: #999;
        }
        
        /* 当不需要导航按钮时，移除内边距 */
        .tabs-wrapper.no-nav {
            padding: 0;
        }
    </style>
</head>
<body>
    <div class="tab-container">
        <div class="tabs-header">
            <div class="nav-button prev disabled">‹</div>
            <div class="tabs-wrapper no-nav">
                <div class="tabs">
                    <div class="tab active" data-tab="tab1">
                        <span class="tab-text">New Tab</span>
                        <span class="close-tab" data-tab="tab1">×</span>
                    </div>
                    <div class="tab" data-tab="tab2">
                        <span class="tab-text">New Tab</span>
                        <span class="close-tab" data-tab="tab2">×</span>
                    </div>
                    <div class="tab" data-tab="tab3">
                        <span class="tab-text">New Tab</span>
                        <span class="close-tab" data-tab="tab3">×</span>
                    </div>
                    <div class="tab" data-tab="tab4">
                        <span class="tab-text">New Tab</span>
                        <span class="close-tab" data-tab="tab4">×</span>
                    </div>
                    <div class="tab" data-tab="tab5">
                        <span class="tab-text">New Tab</span>
                        <span class="close-tab" data-tab="tab5">×</span>
                    </div>
                    <div class="tab" data-tab="tab6">
                        <span class="tab-text">New Tab</span>
                        <span class="close-tab" data-tab="tab6">×</span>
                    </div>
                    <div class="tab" data-tab="tab7">
                        <span class="tab-text">New Tab</span>
                        <span class="close-tab" data-tab="tab7">×</span>
                    </div>
                    <div class="tab" data-tab="tab8">
                        <span class="tab-text">New Tab</span>
                        <span class="close-tab" data-tab="tab8">×</span>
                    </div>
                    <div class="tab" data-tab="tab9">
                        <span class="tab-text">New Tab</span>
                        <span class="close-tab" data-tab="tab9">×</span>
                    </div>
                    <div class="tab" data-tab="tab10">
                        <span class="tab-text">New Tab</span>
                        <span class="close-tab" data-tab="tab10">×</span>
                    </div>
                </div>
            </div>
            <div class="nav-button next">›</div>
        </div>
        
        <div class="tab-content">
            <div class="content active" id="tab1">
                <h3>New Tab Content 1</h3>
                <p>This is the content for the first New Tab.</p>
            </div>
            <div class="content" id="tab2">
                <h3>New Tab Content 2</h3>
                <p>This is the content for the second New Tab.</p>
            </div>
            <div class="content" id="tab3">
                <h3>New Tab Content 3</h3>
                <p>This is the content for the third New Tab.</p>
            </div>
            <div class="content" id="tab4">
                <h3>New Tab Content 4</h3>
                <p>This is the content for the fourth New Tab.</p>
            </div>
            <div class="content" id="tab5">
                <h3>New Tab Content 5</h3>
                <p>This is the content for the fifth New Tab.</p>
            </div>
            <div class="content" id="tab6">
                <h3>New Tab Content 6</h3>
                <p>This is the content for the sixth New Tab.</p>
            </div>
            <div class="content" id="tab7">
                <h3>New Tab Content 7</h3>
                <p>This is the content for the seventh New Tab.</p>
            </div>
            <div class="content" id="tab8">
                <h3>New Tab Content 8</h3>
                <p>This is the content for the eighth New Tab.</p>
            </div>
            <div class="content" id="tab9">
                <h3>New Tab Content 9</h3>
                <p>This is the content for the ninth New Tab.</p>
            </div>
            <div class="content" id="tab10">
                <h3>New Tab Content 10</h3>
                <p>New Tab content for the tenth tab.</p>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tabsContainer = document.querySelector('.tabs');
            const tabsWrapper = document.querySelector('.tabs-wrapper');
            const tabs = document.querySelectorAll('.tab');
            const closeButtons = document.querySelectorAll('.close-tab');
            const prevButton = document.querySelector('.nav-button.prev');
            const nextButton = document.querySelector('.nav-button.next');
            let currentTab = document.querySelector('.tab.active');
            let currentContent = document.querySelector('.content.active');
            let currentPosition = 0;
            let wrapperWidth = tabsWrapper.offsetWidth;
            let tabsWidth = tabsContainer.scrollWidth;
            
            // 初始化第一个内容区域的动画
            gsap.fromTo(currentContent, 
                { opacity: 0, y: 10 },
                { opacity: 1, y: 0, duration: 0.3 }
            );
            
            // 检查是否需要显示导航按钮
            function checkNavButtons() {
                tabsWidth = tabsContainer.scrollWidth;
                wrapperWidth = tabsWrapper.offsetWidth;
                
                if (tabsWidth > wrapperWidth) {
                    prevButton.classList.add('visible');
                    nextButton.classList.add('visible');
                    tabsWrapper.classList.remove('no-nav');
                } else {
                    prevButton.classList.remove('visible');
                    nextButton.classList.remove('visible');
                    tabsWrapper.classList.add('no-nav');
                    currentPosition = 0;
                    tabsContainer.style.transform = 'translateX(0)';
                }
                
                updateNavButtons();
            }
            
            // 更新导航按钮状态
            function updateNavButtons() {
                prevButton.classList.toggle('disabled', currentPosition >= 0);
                nextButton.classList.toggle('disabled', 
                    currentPosition <= -(tabsWidth - wrapperWidth));
            }
            
            // 切换标签页函数
            function switchTab(newTab) {
                if (newTab === currentTab) return;
                
                const tabId = newTab.getAttribute('data-tab');
                const newContent = document.getElementById(tabId);
                
                // 动画时间线
                const tl = gsap.timeline();
                
                // 1. 淡出当前内容
                tl.to(currentContent, {
                    opacity: 0,
                    y: -10,
                    duration: 0.2,
                    ease: "power1.out",
                    onComplete: () => {
                        currentContent.classList.remove('active');
                    }
                });
                
                // 2. 切换标签活动状态
                tl.add(() => {
                    currentTab.classList.remove('active');
                    newTab.classList.add('active');
                    currentTab = newTab;
                    
                    newContent.classList.add('active');
                    currentContent = newContent;
                    
                    // 确保活动标签可见
                    ensureTabVisible(newTab);
                }, "-=0.1");
                
                // 3. 淡入新内容
                tl.fromTo(newContent, 
                    { opacity: 0, y: 10 },
                    { opacity: 1, y: 0, duration: 0.3, ease: "power1.in" }
                );
            }
            
            // 确保标签可见
            function ensureTabVisible(tab) {
                const tabRect = tab.getBoundingClientRect();
                const wrapperRect = tabsWrapper.getBoundingClientRect();
                
                if (tabRect.left < wrapperRect.left) {
                    // 标签在左侧不可见
                    const diff = wrapperRect.left - tabRect.left;
                    currentPosition += diff;
                    tabsContainer.style.transform = `translateX(${currentPosition}px)`;
                } else if (tabRect.right > wrapperRect.right) {
                    // 标签在右侧不可见
                    const diff = tabRect.right - wrapperRect.right;
                    currentPosition -= diff;
                    tabsContainer.style.transform = `translateX(${currentPosition}px)`;
                }
                
                updateNavButtons();
            }
            
            // 导航按钮点击事件
            prevButton.addEventListener('click', function() {
                if (this.classList.contains('disabled')) return;
                
                const moveBy = Math.min(wrapperWidth * 0.8, -currentPosition);
                currentPosition += moveBy;
                tabsContainer.style.transform = `translateX(${currentPosition}px)`;
                updateNavButtons();
            });
            
            nextButton.addEventListener('click', function() {
                if (this.classList.contains('disabled')) return;
                
                const maxScroll = tabsWidth - wrapperWidth;
                const moveBy = Math.min(wrapperWidth * 0.8, maxScroll + currentPosition);
                currentPosition -= moveBy;
                tabsContainer.style.transform = `translateX(${currentPosition}px)`;
                updateNavButtons();
            });
            
            // 标签点击事件
            tabs.forEach(tab => {
                tab.addEventListener('click', function(e) {
                    // 如果点击的是关闭按钮，则不切换标签
                    if (e.target.classList.contains('close-tab')) return;
                    switchTab(this);
                });
            });
            
            // 关闭标签事件
            closeButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const tabId = this.getAttribute('data-tab');
                    const tabToClose = document.querySelector(`.tab[data-tab="${tabId}"]`);
                    const contentToClose = document.getElementById(tabId);
                    
                    // 如果关闭的是当前激活的标签
                    if (tabToClose.classList.contains('active')) {
                        // 找到下一个可用的标签
                        const nextTab = tabToClose.nextElementSibling || tabToClose.previousElementSibling;
                        if (nextTab) {
                            switchTab(nextTab);
                        }
                    }
                    
                    // 移除标签和内容
                    tabToClose.remove();
                    contentToClose.remove();
                    
                    // 检查是否需要更新导航按钮
                    setTimeout(checkNavButtons, 0);
                });
            });
            
            // 窗口大小改变时检查
            window.addEventListener('resize', checkNavButtons);
            
            // 初始检查导航按钮
            checkNavButtons();
        });
    </script>
</body>
</html>
